@import '../styles/themes/default.less';

.MMModal {
    display       : flex;
    flex-direction: column;
    display       : flex;
    position      : fixed;
    left          : 0;
    top           : 0;
    width         : 100%;
    height        : 100%;
    opacity       : 1;
    transition    : all @transitionTiming;
    pointer-events: none;
    z-index       : 1001;
}

.MMModal__center {
    align-items    : center;
    justify-content: center;
}

.MMModal__flexEnd {
    justify-content: flex-end;

    .MMModal_content {
        width: 100%;
    }
}

.MMModal__flexStart {
    justify-content: flex-start;

    .MMModal_content {
        width: 100%;
    }
}

.MMModal__hide {
    pointer-events: none;

    .MMModal_content,
    .MMModal_mask {
        pointer-events: none;
    }
}

.MMModal__hide_fade {
    opacity: 0;
}

.MMModal__hide_down {
    opacity: 0;


    .MMModal_content {
        top: 100%;
    }
}

.MMModal__hide_none {
    display: none;
}

.MMModal__show_down {
    .MMModal_content {
        top: 0
    }
}

.MMModal_mask {
    pointer-events  : auto;
    position        : absolute;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    background-color: @maskColor;

    .MMModal_mask__transparent {
        opacity: 0;
    }

}

.MMModal_content {
    pointer-events: auto;
    position      : relative;
    z-index       : 1;
    transition    : all (@transitionTiming / 1.5);
}




.MMModal_alert {
    position        : relative;
    padding-top     : 20px;
    width           : 280px;
    border-radius   : 10px;
    background-color: @gray1;
}

.MMModal_alert__hide {
    pointer-events: none;
    opacity       : 0;
}

.MMModal_alert_title {
    margin-bottom: 12px;
    line-height  : 22px;
    height       : 22px;
    text-align   : center;
    font-size    : 17px;
    color        : @gray7;
}

.MMModal_alert_control {
    border-top    : 0.5px solid @dividerColor;
    display       : flex;
    flex-direction: row;

    .MMModal_alert_control_item {
        flex-direction : row;
        flex           : 1;
        height         : 50px;
        line-height    : 50px;
        text-align     : center;
        align-items    : center;
        justify-content: center;
        border-right   : 0.5px solid @dividerColor;
        color          : @primaryColor;
        font-size      : 17px;

        &:last-of-type {
            border-right: none;
        }
    }
}

.MMModal_alert_content {
    padding    : 0px 15px 20px 20px;
    font-size  : 14px;
    line-height: 24px;
    color      : @gray6;
    text-align : center;
}


.MMToast {
    display       : flex;
    flex-direction: column;
    position      : fixed;
    left          : 0;
    top           : 200px;
    width         : 100%;
    height        : 100%;
    align-items   : center;
    pointer-events: none;
}

.MMToast_message {
    margin-top            : 5px;
    padding               : 12px 20px;
    position              : relative;
    top                   : 200px;
    max-width             : 240px;
    font-size             : 17px;
    line-height           : 24px;
    color                 : white;
    background-color      : @gray7;
    transition            : all @transitionTiming;
    // opacity            : 0;
    border-radius         : 5px;
}


.MMToast_message_iconfont {
    font-size    : 36px;
    text-align   : center;
    margin-top   : 9px;
    margin-bottom: 9px;
}

.MMToast_message_animation {
    display        : flex;
    margin-top     : 9px;
    margin-bottom  : 9px;
    justify-content: center;
    align-items    : center;
    height         : 36px;
}



.MMToast_message__showing {
    top    : 0px;
    opacity: 1;
}

.MMToast_message__hideing {
    top    : -100px;
    opacity: 0;
}


.title {
    display         : flex;
    flex-direction  : column;
    height          : 52px;
    flex-direction  : row;
    align-items     : center;
    border-bottom   : 0.5px solid @dividerColor;
    font-size       : 16px;
    font-weight     : bold;
    color           : @gray7;
    border-radius   : @borderRadiusSize * 2 @borderRadiusSize * 2 0 0;
    background-color: @gray1;
}

.title_button {
    font-size  : 15px;
    font-weight: bold;
    padding    : 0 @spacingSize * 4;
    color      : @blue;
}

.title_content {
    flex      : 1;
    color     : @gray7;
    text-align: center;
}
